import { Button, Card, Checkbox, Spin } from "@arco-design/web-react"
import { invoke } from "@tauri-apps/api/core";
import { useEffect, useState } from "react";
import { useNavigate } from "react-router-dom";

const EmailList = () => {

    const [emails,setEmails]=useState<Array<any>>([]);
    const nav = useNavigate();
    
    useEffect(()=> {
        const getEmailList = async() => {
            let result :any = await invoke("batch_email",{starts:1,ends:20})
            console.log(result)
            setEmails(result)
        }

        getEmailList()
        
    },[])

    const toEmailInfo = (id:any) => {
        nav("/email/info/"+id)
    }
    return(
        <>
            <Card style={{height:'100%',width:'100%',border:'none',background:'rgb(45, 45, 56)'}}>
                        <div>
                            <Checkbox><span style={{color:'#fff'}}>全选</span></Checkbox>
                            <Button type="primary">删除</Button>
                            <Button type="primary">刷新</Button>
                            <Button type="primary">标记</Button>
                        </div>
                        {emails.length>0? emails?.slice(0,20).map((email:any)=>(
                            <div key={email.id} className="email-list" onClick={() => toEmailInfo(email.id)}>
                                <Checkbox value={email.id} style={{margin:'auto 0'}}></Checkbox>
                                <div className="email-list-item email-list-from">{email.from.split('<')[0]}</div>
                                <div className="email-list-item email-list-subject">{email.subject}</div>
                                <div className="email-list-item email-list-date">{email.date}</div>
                            </div>
                            
                        )): <Spin />}
            </Card>
        </>
    )
}
export default EmailList;